<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-cn"><head>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1,user-scalable=no">
<%--    <link rel="icon" href="image/favicon.ico"/>--%>
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="bookmark" href="favicon.ico"/>
    <title>达理书城后台登录页面</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="layui/layui.all.js"></script>
    <script src="layui/css/layui.css"></script>
    <link rel="stylesheet" type="text/css" href="css/edumis.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<div class="loading" style="width: 100%; display: none;"></div><div class="circle-loading" style="display: none;"></div>
<div id="body-bg"></div>

<canvas id="Mycanvas" width="1920" height="936"></canvas>
<div class="panel login center-block">

    <div id="logo">
        <div class="image"></div>
        <h3>达理书城の后台</h3>
    </div>
    <form id="login-action" action="${pageContext.request.contextPath}/login" method="post">
        <div class="form-group">
            <label for="inputUser" class="control-label">用户名：</label>
            <div class="form-item">
                <input type="text" class="form-control normal" id="inputUser" value="" name="user" placeholder="请输入邮箱/账号" required="required">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label">密&nbsp;&nbsp;&nbsp;码：</label>
            <div class="form-item">
                <input type="password" class="form-control normal" id="inputPassword" value="" name="password" placeholder="请输入密码" required="required">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label"> </label>
            <div class="form-item">
                <h1>${msg}</h1>
                <a href="${pageContext.request.contextPath}/error" class="layui-btn layui-btn-xs">忘记密码</a>
                <input id="butt" type="button" value="欢迎注册" class="layui-btn layui-btn-xs">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">  </label>
            <div class="form-item">
                <input id="log" type="submit" value="登录" class="btn btn-success">
                <input id="logReset" type="reset" value="重置" class="btn btn-primary">
                <br>
                <br>
                <br>
<%--                <a href="/hyzc" style="display: inline-block; margin-top: 5px;margin-left: 5px; cursor: pointer" id="reg">欢迎注册</a>--%>
            </div>
        </div>
        <div class="clear"></div>
    </form>
    <div class="clear"></div>
</div>


<div id="define">
    <hr>
    <p>吴劲松版权所有 Copyright © <span id="year">2020-2021</span> 501664112@qq.com 当前在线人数为:2 | <span id="time"></span></p>
</div>
<div style="display: none;" id="gb">
    <form class="layui-form" action="${pageContext.request.contextPath}/zc" method="post">
        <br>
        <br>
        <div class="layui-form-item">
            <label class="layui-form-label">用户账号</label>
            <div class="layui-input-inline">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input" id="pass1">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" name="passwords" required lay-verify="pwd" placeholder="请再次输入密码" autocomplete="off" class="layui-input" id="pass2">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="email" name="emile" required lay-verify="emails" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" required lay-verify="phones" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="xb" value="男" title="男" checked>
                <input type="radio" name="xb" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">难受程度</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="难受">
                <input type="checkbox" name="like[read]" title="难受" checked>
                <input type="checkbox" name="like[dai]" title="难受">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">所在地</label>
                <div class="layui-input-inline">
                    <select name="location" lay-verify="required" lay-filter="type">
                        <option value=""></option>
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广州">广州</option>
                        <option value="江西">江西</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="truename" placeholder="请输入您的姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <span>${zcts}</span>
            </div>
        </div>
    </form>

</div>
</body>
<script>
    layui.use(['layer', 'element', 'form', 'layedit'], function() {
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var layedit = layui.layedit;
        $(function() {
            $("#butt").click(function() {
                layer.open({
                    type: 1,
                    title: "注册页面",
                    area: ['600px', '700px'],
                    offset: '20px',
                    content: $("#gb"),
                    cancel: function() {
                        // 你点击右上角 X 取消后要做什么
                        setTimeout('window.location.reload()', 1);
                    },
                    success: function() {
                        form.on('submit(formDemo)', function(data) {

                        });
                    }
                })
                form.render();
            })

            //验证输入的密码是否相同；
            $("#pass2").blur(function() {
                var pass1 = $("#pass1").val();
                var pass2 = $("#pass2").val();
                if(pass1 != pass2) {
                    layer.msg("两次输入的密码不一致", {
                        "icon": 2,
                        "time": 2000
                    });
                    $("#pass2").val("");
                    return false;
                }
                return true;
            });
        });
        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');
        //自定义验证规则
        form.verify({
            title: function(value) {
                if(value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            },
            pwd: [
                /^(\w){6,20}$/, '只能输入6-20个字母、数字、下划线'
            ],
            emails: [
                /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, '请输入正确的邮箱格式：<br>如：xxx@qq.com<br>xxx@163.com等格式'
            ],
            phones: [
                /^(\w){7,11}$/, '您的输入有误，请重新输入(中国11位手机号)'
            ],
            truename: [
                /^[\u4e00-\u9fa5]{2,4}$/, '您的输入有误，请输入2-4位中文'
            ],
            content: function(value) {
                layedit.sync(editIndex);
            }
        });
    });
    window.onload =function Time(){
        var time = new Date();
        var Month = time.getUTCMonth()+1;
        document.getElementById("time").innerText=time.getUTCFullYear()+"年"+Month+"月"+time.getUTCDate()+"日";
    }
</script>
</html>
